<template>
  <div id="three"></div>
</template>

<script setup lang="ts">
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import {  onMounted } from 'vue';
let scene, camera, renderer, mixer, clock;

onMounted(() => {
  init();
  animate();
});
let  cube, controls;
function init() {
  const viewerDom= document.getElementById('three');
  // 创建场景
  scene = new THREE.Scene();

  // 创建相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(viewerDom.clientWidth, viewerDom.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  viewerDom.appendChild(renderer.domElement);

  // 创建几何体
  const geometry = new THREE.BoxGeometry( 1, 1, 1 );
  // 材质
  const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  // 创建网格
  cube = new THREE.Mesh( geometry, material );
  // 设置元素位置，x,y,z
  // cube.position.set(-2, 0, 0);
  console.log('cube::: ', cube);
  // 添加到场景
  scene.add( cube );

  // 添加坐标轴
  const axesHelper = new THREE.AxesHelper( 5 );
  scene.add( axesHelper );
  
  // 设置相机位置，x,y,z
  camera.position.set(0, 1, 8);
  console.log('camera::: ', camera);
  renderer.render(scene, camera);

  const header=document.querySelector('.header');
  console.log('header::: ', header);
  // 添加控制器
  controls = new OrbitControls(camera, renderer.domElement);
  // controls = new OrbitControls(camera, header);
  // console.log('controls::: ', controls);

  // Load the glTF model
  const loader = new GLTFLoader();
  loader.load('/models/ren.glb', function(gltf) {
    console.log('gltf::: ', gltf);
    const model = gltf.scene;
    model.scale.set(0.0001 * 3, 0.0001 * 3, 0.0001 * 3);
    model.position.set(0, 0, 0);
    model.name = 'plane';
    scene.add(gltf.scene);
    mixer = new THREE.AnimationMixer(gltf.scene);
    gltf.animations.forEach((clip) => {
      const action = mixer.clipAction(clip);
      action.play();
    });
  }, undefined, function(error) {
    console.error(error);
  });

  clock = new THREE.Clock();
  // createPanel();


  window.addEventListener('resize', onWindowResize, false);
}


function createPanel() {

  const panel = new GUI( { width: 310 } );

  const folder1 = panel.addFolder( 'Base Actions' );
  const folder2 = panel.addFolder( 'Additive Action Weights' );
  const folder3 = panel.addFolder( 'General Speed' );

  panelSettings = {
    'modify time scale': 1.0,
  };

  const baseNames = [ 'None', ...Object.keys( baseActions ) ];

  for ( let i = 0, l = baseNames.length; i !== l; ++ i ) {

    const name = baseNames[ i ];
    const settings = baseActions[ name ];
    panelSettings[ name ] = function () {

      const currentSettings = baseActions[ currentBaseAction ];
      const currentAction = currentSettings ? currentSettings.action : null;
      const action = settings ? settings.action : null;

      if ( currentAction !== action ) {

        prepareCrossFade( currentAction, action, 0.35 );

      }

    };

    crossFadeControls.push( folder1.add( panelSettings, name ) );

  }

  for ( const name of Object.keys( additiveActions ) ) {

    const settings = additiveActions[ name ];

    panelSettings[ name ] = settings.weight;
    folder2.add( panelSettings, name, 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) {

      setWeight( settings.action, weight );
      settings.weight = weight;

    } );

  }

  folder3.add( panelSettings, 'modify time scale', 0.0, 1.5, 0.01 ).onChange( modifyTimeScale );

  folder1.open();
  folder2.open();
  folder3.open();

  crossFadeControls.forEach( function ( control ) {

    control.setInactive = function () {

      control.domElement.classList.add( 'control-inactive' );

    };

    control.setActive = function () {

      control.domElement.classList.remove( 'control-inactive' );

    };

    const settings = baseActions[ control.property ];

    if ( ! settings || ! settings.weight ) {

      control.setInactive();

    }

  } );

}
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  // cube.rotation.z += 0.01;
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  // const delta = clock.getDelta();
  // if (mixer) mixer.update(delta);
  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

// Example function to play a specific animation
function playAnimationclip(clipName) {
  if (mixer) {
    const action = mixer.clipAction(clipName);
    if (!action.isRunning()) {
      action.reset();
      action.play();
    }
  }
}

// Add button to play a specific animation
const playButton = document.createElement('button');
playButton.innerHTML = 'Play Animation';
playButton.style.position = 'absolute';
playButton.style.top = '10px';
playButton.style.left = '10px';
playButton.onclick = function() {
  playAnimationclip('Walk'); // Replace 'Walk' with the name of your animation clip
};
document.body.appendChild(playButton);
</script>

<style scoped>
#three {
  height: 100%;
  width: 100%;
}
</style>
